<template>
  <t-header>
    <t-head-menu theme="light" expand-type="popup">
      <template #logo>
        <template v-if="store.showHeaderLogo">
          <img
            src="../../assets/images/img/logo.png"
            alt=""
            :class="{ collapsed }"
          />
          <div>
            <h2 class="tc">lee</h2>
          </div>
        </template>
        <component :is="collapsed ? 'MenuFoldIcon' : 'MenuUnfoldIcon'" size="20" class="margin-right-sm pointer" @click="TOGGLE_COLLAPSED" v-else />
      </template>

      <template #operations>
        <div class="flex justify-center align-center">
          <t-dropdown trigger="click" direction="left">
            <t-button variant="text">
              <template #icon>
                <component is="UserCircleIcon" size="16" />
              </template>
              <span>&nbsp;站点管理员</span>
              <template #suffix>
                <component is="ChevronDownIcon" size="16" />
              </template>
            </t-button>
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item
                  class="operations-dropdown-container-item"
                  :divider="true"
                >
                  切换角色
                  <!-- <t-dropdown-menu>
                    <t-dropdown-item class="operations-dropdown-container-item" @click="setRole(item.colKey)"
                      v-for="(item, index) in roleList" :key="item.colKey">
                      {{ item.value }}
                    </t-dropdown-item>
                  </t-dropdown-menu> -->
                </t-dropdown-item>
                <t-dropdown-item
                  class="operations-dropdown-container-item"
                  @click="handleLogout"
                >
                <component is="PoweroffIcon" />退出登录
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
          </t-dropdown>
          <component is="SettingIcon" size="16" class="setting-icon" @click="TOGGLE_DRAWER" />
        </div>
      </template>
    </t-head-menu>
  </t-header>
  <t-drawer
    size="472px"
    v-model:visible="settingDrawer"
    :footer="false"
    :close-btn="true"
  >
    <template #header>
      <div class="flex-column">
        <div class="title icon">偏好设置</div>
        <span class="preferenceTips">支持导航布局和主题色的自定义设置</span>
      </div>
    </template>
    <Preference />
  </t-drawer>
  <!-- <tabsView /> -->
</template>
<script setup lang="ts">
import Preference from '@/components/Preference/index.vue';
// import breadCrumb from '@/components/Header/breadCrumb.vue';
// import tabsView from '@/components/header/tabsView.vue';
import { DialogPlugin } from 'tdesign-vue-next';
import { storeToRefs } from 'pinia';
import { useSystemStore } from '@/store/modules/system';
import { useUserStore } from '@/store/modules/user';
// import { saveTheme } from '@/api/preference'
import { throttle } from 'lodash';

const store = useSystemStore();
const { LOG_OUT } = useUserStore();
const { collapsed, settingDrawer } = storeToRefs(store);
const TOGGLE_COLLAPSED = store.TOGGLE_COLLAPSED;
const TOGGLE_DRAWER = store.TOGGLE_DRAWER;
const imgUrl = import.meta.env.VITE_API_URL;

const handleLogout = throttle(
  () => {
    const confirmDia = DialogPlugin({
      header: '退出登录',
      body: `此操作将退出登录, 是否继续?`,
      onConfirm: () => {
        LOG_OUT();
        confirmDia.hide();
      },
      onClose: () => {
        confirmDia.hide();
      },
    });
  },
  1000,
  { leading: true, trailing: false },
);
</script>
<style lang="scss" scoped>
.setting-icon {
  cursor: pointer;
}

.preferenceTips {
  font-size: 12px;
  font-weight: normal;
  @include font_color('placeholder_color');
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  :deep(.t-dropdown__item-text) {
    display: flex;
    align-items: center;
  }

  .t-icon {
    margin-right: 8px;
  }

  :deep(.t-dropdown__item) {
    width: 100%;
    margin-bottom: 0px;
  }

  &:last-child {
    :deep(.t-dropdown__item) {
      margin-bottom: 8px;
    }
  }
}

:deep(.t-menu__item) {
  padding: 0;
}
</style>
